<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>环保益家-垃圾分类管理平台</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/css.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header">
			<div class="time clearfix">
				<div class="clearfix now">
					<div class="shijian" id="shijian">12:00</div>
					<div class="riqi">
						<p class="yue" id="yue">2020-2-13</p>
						<p class="zhou" id="zhou">星期四</p>
					</div>
				</div>
				<div class="sjd">
					<span class="before">2020-35-55</span> -
					<span class="after">2020-55-55</span>
				</div>
				<div class="shuju">
					<font>今日数据</font>
					<span class="point ml10"><i></i></span>
					<div class="tan" style="display: none;">
						<div class="title">历史数据</div>
						<ul class="clearfix">
							<li><a href="javascript:;" class="on" data1=1 data2=0>今日</a></li>
							<li><a href="javascript:;" data1=1 data2=1>昨日</a></li>
							<li><a href="javascript:;" data1=2 data2=0>本周</a></li>
							<li><a href="javascript:;" data1=3 data2=0>本月</a></li>
							<li><a href="javascript:;" data1=5 data2=0>本年</a></li>
							<li><a href="javascript:;"data1=2 data2=1>上周</a></li>
							<li></li>
							<li><a href="javascript:;"data1=3 data2=1>上月</a></li>
							<li></li>
							<li><a href="javascript:;" data1=5 data2=1>上年</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="title">环保益家-垃圾分类管理平台</div>
			<ul class="nav clearfix">
				<li><span class="star">★</span><a href="">站点管理</a></li>
				<li><span class="star">★</span><a class="index-dudao" href="">督导管理</a></li>
				<li><span class="star">★</span><a href="">车辆管理</a></li>
			</ul>
		</div>
		<div class="main clearfix">
			<div class="box m-left">
				<div class="box1">
					<div class="title">
						<span class="point"><i></i></span>
						参与用户
					</div>
					<div class="num"></div>
					<div class="content">
						<div id="echart1" style="width: 100%; height:100%;"></div>
						<div class="num1"></div>
					</div>
				</div>
				
				<div class="box2">
					<div class="title">概率分布</div>
					<ul class="content clearfix">
						<li>
							<div class="circleChart" id="1"></div>
							<p class="text">80%</p>
						</li>
						<li>
							<div class="circleChart" id="2"></div>
							<p class="text">88%</p>
						</li>
						<li>
							<div class="circleChart" id="3"></div>
							<p class="text">88%</p>
						</li>
						<li>
							<div class="circleChart" id="4"></div>
							<p class="text">88%</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="box m-center">
				<div class="c-top">
					<ul class="clearfix">
						<li>
							<div class="star star1">★</div>
							<div class="text text1">
								<p>可回收垃圾</p>
								<p>12231<span>吨</span></p>
							</div>
						</li>
						<li>
							<div class="star star2">★</div>
							<div class="text">
								<p>可回收垃圾</p>
								<p>12231<span>吨</span></p>
							</div>
						</li>
						<li>
							<div class="star star3">★</div>
							<div class="text">
								<p>可回收垃圾</p>
								<p>12231<span>吨</span></p>
							</div>
						</li>
						<li>
							<div class="star star4">★</div>
							<div class="text">
								<p>可回收垃圾</p>
								<p>12231<span>吨</span></p>
							</div>
						</li>
					</ul>
				</div>
				<div class="c-middle">
					<div class="title">
						<span class="point mr5"><i></i></span>
						时间分布
					</div>
					<div id="echart2" style="width: 100%; height:100%;"></div>
				</div>
				<div class="c-bottom" style="position: relative;">
					<div class="title">分类总量总计（吨）</div>
					<div class="num2" style="position: absolute;z-index: 9999;"></div>
					<div id="china-map" style="width: 100%;height: 100%;"></div>
					<div class="dqlist">
						<div class="dtback" onclick="back()">返回上一级</div>
						<div class="head">
							<span>地区</span><span>重量</span><span>操作</span>
						</div>
						<ul>
							<!-- <li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li class="on"><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li>
							<li><span>地区：沙县</span><span>重量：588</span><span>详情</span></li> -->
						</ul>
					</div>
				</div>
			</div>
			<div class="box m-right">
				<div class="box1">
					<div class="title">
						<span class="point mr5"><i></i></span>
						站点与人员
					</div>
					<ul class="clearfix">
						<li>
							<p>
								<span class="star">★</span>
								<span>站点管理</span>
							</p>
							<p class="site">122<span>个</span></p>
						</li>
						<div class="line">
							<span></span>
							<span></span>
						</div>
						<li>
							<p>
								<span class="star">★</span>
								<span>督导管理</span>
							</p>
							<p class="dudao">122<span>人</span></p>
						</li>
						<div class="line">
							<span></span>
							<span></span>
						</div>
						<li>
							<p>
								<span class="star">★</span>
								<span>车辆管理</span>
							</p>
							<p class="car">122<span>辆</span></p>
						</li>
					</ul>
				</div>
				<div class="box2">
					<div class="title">
						<span class="point mr5"><i></i></span>
						设备概况
					</div>
					<div id="echart3" style="width: 100%; height:100%;"></div>
				</div>
				<div class="box3">
					<div class="title">
						<span class="point mr5"><i></i></span>
						区域站点
					</div>
					<div id="echart5" style="width: 100%; height:100%;"></div>
				</div>
				<div class="box4">
					<div class="title">
						分类占比
					</div>
					<div id="echart4" style="width: 100%; height:100%;"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/echarts.js"></script>
	<script type="text/javascript" src="js/china-main-city-map.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/md5.js"></script>
	<script src="js/circleChart.min.js"></script>
	<script src="js/js.js"></script>
	<script src="js/biao.js"></script>
	<script src="js/api.js"></script>
	<script type="text/javascript">
		$('.index-dudao').get(0).href="weigui.html?areaid="+areaid
		$("body").css('minHeight',document.documentElement.clientHeight)
		getData('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getParticipatedata')
		getData1('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getClassData')
		getData2('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getSpreaddata')
		getData3('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getSiteData')
		getData5('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getFacilityData')
		if($('.now')){
			formDate()
		}
		$('.shuju font').click(function(e){
			e.stopPropagation()
			$('.tan').slideToggle()
		})
		$('body').click(function(e){
			e.stopPropagation()
			$('.tan').slideUp()
		})
		$('.tan a').click(function(e){
			$('.shuju font').html($(this).text()+'数据')
			$(this).parent().siblings().children().removeClass('on')
			$(this).addClass('on')
			rptType=$(this).attr('data1')
			rpttime=$(this).attr('data2')
			if(rptType==1&&rpttime==0){
				$('.sjd').hide()
				$('.now').show()
			}else if(rptType==1&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showYesterDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==2&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showWeekFirstDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==2&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastWeek()}</span> -
					<span class="after">${showLastWeekDay()}</span>
				`)
			}else if(rptType==3&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showMonthFirstDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==3&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastMonthFirstDay()}</span> -
					<span class="after">${showLastMonthDay()}</span>
				`)
			}else if(rptType==5&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showYearFirstDay()}</span> -
					<span class="after">${showYearDay()}</span>
				`)
			}else if(rptType==5&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastYearFirstDay()}</span> -
					<span class="after">${showLastYearDay()}</span>
				`)
			}
			
			getData4('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getAreadata', pid, areacode,areaname)
			getData('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getParticipatedata')
			getData1('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getClassData')
			getData2('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getSpreaddata')
			getData3('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getSiteData')
			getData5('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getFacilityData')
		})
		
	</script>
</html>